<template>
    <div class="layout">
        <header class="header">
            <div class="container">
                <div class="header-content">
                    <div class="logo">
                        <h1>简约博客</h1>
                    </div>
                    <div class="nav-container">
                        <nav class="nav">
                            <router-link to="/home" class="nav-link"
                                >首页</router-link
                            >
                            <router-link to="/blog" class="nav-link"
                                >博客</router-link
                            >
                            <router-link to="/about" class="nav-link"
                                >关于</router-link
                            >
                            <router-link to="/contact" class="nav-link"
                                >联系</router-link
                            >
                        </nav>
                        <div class="user-actions">
                            <div v-if="userInfo" class="user-info">
                                <img
                                    v-if="userInfo.avatar"
                                    :src="userInfo.avatar"
                                    class="avatar"
                                    :alt="userInfo.name"
                                />
                                <span class="username">{{
                                    userInfo.name
                                }}</span>
                                <button
                                    class="logout-btn"
                                    @click="handleLogout"
                                >
                                    退出登录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <main class="main">
            <div class="container">
                <router-view></router-view>
            </div>
        </main>

        <footer class="footer">
            <div class="container">
                <p>&copy; 2023 简约博客 - 一个简约风格的博客网站</p>
            </div>
        </footer>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const userInfo = ref(null);

onMounted(() => {
    // 从localStorage获取用户信息
    const userStr = localStorage.getItem("user");
    if (userStr) {
        try {
            userInfo.value = JSON.parse(userStr);
        } catch (e) {
            console.error("解析用户信息失败", e);
        }
    }
});

const handleLogout = () => {
    // 清除登录状态和用户信息
    localStorage.removeItem("isLogin");
    localStorage.removeItem("user");

    // 提示用户已退出登录
    alert("您已成功退出登录");

    // 跳转到登录页
    router.push("/login");
};
</script>

<style scoped>
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 1.8rem;
    margin: 0;
    color: #3498db;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: #555;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.nav-link:hover,
.router-link-active {
    color: #3498db;
    background-color: rgba(52, 152, 219, 0.1);
}

.user-actions {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.username {
    font-weight: 500;
    color: #555;
}

.logout-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.logout-btn:hover {
    background-color: #c0392b;
}

.main {
    flex: 1;
    padding: 40px 0;
}

.footer {
    background-color: white;
    padding: 20px 0;
    text-align: center;
    color: #777;
    border-top: 1px solid #eee;
}
</style>
